<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta content="IE=edge" http-equiv="X-UA-Compatible"/>
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport"/>
    <title></title>
    <link href="../../css/lanai-ui.css" rel="stylesheet"/>
</head>
<body>
<section class="content no-pad-top">
    <div class="box box-widget">
        <div class="box-body">
            <h3>
                默认表格
            </h3>
            <div class="row">
                <div class="col-sm-12">
                    <table class="table">
                        <thead>
                        <tr>
                            <th style="width: 60px">编号</th>
                            <th>任务</th>
                            <th>进度</th>
                            <th style="width: 60px">完成量</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>1.</td>
                            <td>更新软件</td>
                            <td>
                                <div class="progress progress-xs">
                                    <div class="progress-bar progress-bar-danger" style="width: 55%"></div>
                                </div>
                            </td>
                            <td><span class="badge bg-red">55%</span></td>
                        </tr>
                        <tr>
                            <td>2.</td>
                            <td>清理数据库缓存</td>
                            <td>
                                <div class="progress progress-xs">
                                    <div class="progress-bar progress-bar-yellow" style="width: 70%"></div>
                                </div>
                            </td>
                            <td><span class="badge bg-yellow">70%</span></td>
                        </tr>
                        <tr>
                            <td>3.</td>
                            <td>测试运行环境</td>
                            <td>
                                <div class="progress progress-xs progress-striped active">
                                    <div class="progress-bar progress-bar-primary" style="width: 30%"></div>
                                </div>
                            </td>
                            <td><span class="badge bg-light-blue">30%</span></td>
                        </tr>
                        <tr>
                            <td>4.</td>
                            <td>发现Bug并修复</td>
                            <td>
                                <div class="progress progress-xs progress-striped active">
                                    <div class="progress-bar progress-bar-success" style="width: 90%"></div>
                                </div>
                            </td>
                            <td><span class="badge bg-green">90%</span></td>
                        </tr>
                        <tr>
                            <td>5.</td>
                            <td>安装新版本</td>
                            <td>
                                <div class="progress progress-xs progress-striped">
                                    <div class="progress-bar progress-bar-danger" style="width: 60%"></div>
                                </div>
                            </td>
                            <td><span class="badge bg-danger">60%</span></td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-12">
                    <button class="btn btn-primary" type="button" value="table-bordered">
                        边框<br/><code>.table-bordered</code></button>
                    <button class="btn btn-default" type="button" value="table-condensed">宽高自适应<br/><code>.table-condensed</code>
                    </button>
                    <button class="btn btn-success" type="button" value="table-striped">
                        隔行变色<br/><code>.table-striped</code></button>
                    <button class="btn btn-info" type="button" value="table-hover">鼠标浮动变色<br/><code>.table-hover</code>
                    </button>
                </div>
            </div>
        </div>
    </div>
</section>
<script src="../../js/jquery.min.js"></script>
<script src="../../js/lanai-ui.js"></script>
<script type="text/javascript">
    $(function () {
        $(".btn").click(function () {
            var that = this;
            $(".table").toggleClass($(that).val());
        })
    });
</script>
</body>
</html>
